.page-container {
    bottom: px2rem(100px);
}
.detail-page {
    font-size: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: px2rem(100px);
    left: 0;
    
    .info-title {
        background-color: #F8F8F8;
        font-size: px2rem(20px);
        height: px2rem(30px);
        line-height: px2rem(30px);
        color: #666666;
        padding: 0 px2rem(46px);
    }
    .staff-info {
        position: relative;
        font-size: 0;
        padding: px2rem(32px) px2rem(46px);
        border-bottom: px2rem(1px) solid #ECECEC;

        img,
        .head {
            display: inline-block;
            vertical-align: middle;
            width: px2rem(80px);
            font-size: px2rem(30px);
            text-align: center;
            background-color: #F4F4F4;
            height: px2rem(80px);
            line-height: px2rem(80px);
            border-radius: px2rem(80px);
            margin-right: px2rem(24px);
        }
        .text {
            position: relative;
            display: inline-block;
            vertical-align: middle;

            .status,
            .name {
                position: relative;
                height: px2rem(40px);
                line-height: px2rem(40px);
                font-size: px2rem(30px);
                color: #333;
            }
            .name {
                top: -px2rem(10px);
            }
            .status {
                bottom: -px2rem(10px);
                font-size: px2rem(24px);
                color: #666;
            }
        }
        img.audit-state {
            position: absolute;
            right: px2rem(46px);
            bottom: -px2rem(63px);
            width: px2rem(176px);
            height: px2rem(126px);
            background-color: #fff;
            border-radius: 0;
            margin-right: 0;
        }
    }
    .info-list {
        padding: 0 px2rem(46px);

        .info-item {
            font-size: 0;

            .info-label,
            .info-text {
                display: inline-block;
                vertical-align: top;
                font-size: px2rem(24px);
                margin: px2rem(13px) 0;
            }
            .info-label {
                position: absolute;
                text-align: right;
                width: px2rem(120px);
                white-space: nowrap;
                color: #999999;
            }
            .info-text {
                margin-left: px2rem(120px);
                color: #333333;

                &.img {
                    font-size: 0;
                }
                img {
                    width: px2rem(144px);
                    height: px2rem(190px);
                    margin: 0 px2rem(20px) px2rem(20px) 0;

                    &.logo {
                        width: px2rem(80px);
                        height: px2rem(80px);
                    }
                }
            }
        }

        .info-item.lock-item {
            .info-label,
            .info-text {
                height: px2rem(60px);
                line-height: px2rem(60px);
            }
        }
        .info-item.reserve-name .info-text {
            min-height: px2rem(86px);
        }
    }
    .info-list.table {
        padding: px2rem(13px) px2rem(28px);
        
        .info-item {
            font-size: 0;
            display: flex;
            text-align: center;

            div {
                flex: 1;
                height: px2rem(70px);
                line-height: px2rem(70px);
                font-size: px2rem(24px);
            }
            &.title {
                color: #fff;
                background-color: #FBAE38;
            }
        }
    }
    .info-list.ticket {
        padding: px2rem(30px) px2rem(38px) px2rem(14px);

        .info-item {
            &.info-desc div {
                box-sizing: border-box;
                display: inline-block;
                vertical-align: middle;
                width: 50%;
                height: px2rem(54px);
                line-height: px2rem(54px);
                color: #666666;
                font-size: px2rem(24px);

                &:first-child {
                    padding-left: px2rem(38px);
                }
                &:last-child {
                    text-align: right;
                    padding-right: px2rem(38px);
                }
            }

            &.ticket-info {
                position: relative;
                width: px2rem(675px);
                height: px2rem(295px);
                margin: 0 auto;
                background: url('images/approval/ticket.png') no-repeat no-repeat center center;
                background-size: 100% 100%;
                color: #fff;
                text-align: right;

                .num {
                    position: relative;
                    display: inline-block;
                    vertical-align: middle;
                    height: px2rem(75px);
                    line-height: px2rem(75px);
                    margin-right: px2rem(320px);
                    top: px2rem(79px);
                    font-family: 'Stencil';
                    font-weight: Regular;
                    font-size: px2rem(110px);
                }
                .num:before {
                    content: '￥';
                    position: absolute;
                    left: -px2rem(51px);
                    bottom: 0;
                    width: px2rem(42px);
                    height: px2rem(51px);
                    line-height: px2rem(51px);
                    font-family: PingFang-SC-Medium;
                    font-size: px2rem(51px);

                }
                .date-time {
                    position: relative;
                    display: block;
                    font-size: px2rem(20px);
                    top: px2rem(137px);
                    margin-right: px2rem(305px);

                    .time {
                        height: px2rem(29px);
                        line-height: px2rem(29px);
                        color: #49494B;
                        background-color: #fff;
                        margin-left: px2rem(10px);
                        border-radius:0px px2rem(12px) 0px 0px;
                        padding: 0 px2rem(2px);
                    }
                }
                .type {
                    position: absolute;
                    top: px2rem(150px);
                    right: px2rem(21px);
                    width: px2rem(140px);
                    height: px2rem(30px);
                    line-height: px2rem(30px);
                    font-size: px2rem(30px);
                    text-align: center;

                }
            }
        }
    }
    .info-node {
        padding: px2rem(36px) px2rem(48px);

        .node-item {
            position: relative;
            font-size: 0;

            img,
            .head {
                position: absolute;
                left: 0;
                top: 0;
                display: inline-block;
                vertical-align: top;
                text-align: center;
                background-color: #F4F4F4;
                font-size: px2rem(24px);
                width: px2rem(70px);
                height: px2rem(70px);
                line-height: px2rem(70px);
                border-radius: px2rem(70px);
            }
            .text {
                position: relative;
                display: block;
                vertical-align: top;
                font-size: px2rem(24px);
                color: #333;
                margin-left: px2rem(80px);

                .status,
                .name,
                .time {
                    position: relative;
                    display: inline-block;
                    height: px2rem(70px);
                    line-height: px2rem(70px);
                    font-size: px2rem(24px);
                    color: #333;
                }
                .name {
                    margin: 0 px2rem(20px) 0 px2rem(48px);
                }
                .time {
                    float: right;
                    font-size: px2rem(20px);
                    color: #999;
                }
                .remark {
                    display: block;
                    box-sizing: border-box;
                    height: px2rem(110px);
                    padding: px2rem(20px) px2rem(48px);
                    overflow: hidden;
                }
            }
            &:before {
                content: ' ';
                position: absolute;
                top: px2rem(70px);
                left: px2rem(35px);
                height: px2rem(110px);
                border-left: 1px dashed #0F9CFF;
            }
            &:last-child:before {
                content: '';
                border-left: 0;
            }
        }
    }
}
.bottom-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: px2rem(100px);
    line-height: px2rem(100px);
    text-align: center;
    border-top: 1px solid #ECECEC;
    color: #0F9CFF;
    font-size: px2rem(36px);
    overflow: hidden;

    .ui-text {
        position: relative;
        display: block;
        vertical-align: middle;
        width: 50%;
        height: px2rem(100px);
        line-height: px2rem(100px);
        font-size: px2rem(36px);

        input {
            position: relative;
            z-index: 2;
            display: none;
            box-sizing: border-box;
            width: px2rem(700px);
            height: px2rem(78px);
            line-height: px2rem(78px);
            margin: px2rem(10px) auto !important;
            padding: px2rem(10px) !important;
            border: px2rem(1px) solid #ECECEC !important;
            font-size: px2rem(24px);
            opacity: 0;
        }
        input.text {
            width: px2rem(560px);
            line-height: normal;
            margin: px2rem(10px) px2rem(130px) px2rem(10px) px2rem(20px) !important;
        }
        .submit-btn {
            position: absolute;
            top: px2rem(9px);
            right: 4%;
            width: px2rem(120px);
            height: px2rem(60px);
            line-height: px2rem(40px);
            padding: px2rem(10px) !important;
            text-align: center;
            color: rgb(255, 255, 255) !important;
            background-color: rgb(74, 175, 205);
            border: px2rem(1px) solid rgb(74, 175, 205) !important;
        }
        .btn-items {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px2rem(100px);
            line-height: px2rem(100px);
            display: -webkit-flex;
            display: flex;

            .btn-item {
                -webkit-flex: 1;
                flex: 1;
                display: inline-block;
                vertical-align: middle;
                font-size: px2rem(36px);
                opacity: 1;
                border-width: 0 !important;
                text-align: center;
                color: #0F9CFF !important;
            }
        }
    }
    .ui-text-focus {
        position: relative;
        width: 100%;
        background: #fff;
        z-index: 2;
        input {
            display: block;
            opacity: 1;
        }
        .btn-items {
            display: none;
        }
    }
    .operate-btns {
        position: absolute;
        z-index: 1;
        width: 50%;
        height: px2rem(100px);
        line-height: px2rem(100px);
        font-size: 0;
        right: 0;
        bottom: 0;

        .operate-btn {
            display: inline-block;
            vertical-align: middle;
            width: px2rem(140px);
            height: px2rem(70px);
            line-height: px2rem(70px);
            border: px2rem(2px) solid #0F9CFF;
            background: #fff;
            font-size: px2rem(30px);
        }
        .agree-btn {
            border-radius: 0 px2rem(70px) px2rem(70px) 0;
            background: #0F9CFF;
            color: #fff;
        }
        .refuse-btn {
            border-radius: px2rem(70px) 0 0 px2rem(70px);
        }
    }
}